<template>
  <div  :class="{ isHidden: loadEnd }">
    <div class="search" @click="$router.push('/search')">
      <van-search   v-model="value" disabled placeholder="请输入搜索关键词" />
    </div>
   <div class="cate-container">
      <div class="cates-wrap">
     
        <div class="cates">
          <div
            v-for="(cate, index) in cates"
            :key="cate.id"
            @click="switchTab(index)"
            :class="[
              'cate',
              {
                active: index === num,
              },
            ]"
          >
            {{ cate.name }}
          </div>
        </div>
      </div>
      <div class="items-wrap">
        <div class="items">
            <div class="zds" v-if="!items.length">
          <img class="quehuo" src="../../assets/meiyou.jpg" alt="" />
        </div>
          <div
            class="item"
            @click="enterDetail(item.id)"
            v-for="item in items"
            :key="item.id"
          >
            <img class="item-pic" :src="item.pic" alt="" />
            <div class="item-info">
              <h5>{{ item.name }}</h5>
              <div class="item-price">
                <p class="price">￥{{ item.minPrice }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <mtabbar />
  </div>
</template>

<script>
import Mtabbar from '_components/Mtabbar'
import { fetchCates, fetchItems } from '_api'
export default {
  data () {
    return {
      cates: [],
      num: 0,
      items: [],
      value:'',
       loadEnd: true,
    }
  },
  created () {
    this.fetchCates()
  },
  methods: {
   
    enterDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    switchTab (index) {
      // 切换分类
      this.num = index
      this.fetchItems()
    },
    fetchItems () {
      fetchItems({
        categoryId: this.cates[this.num].id
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
          this.loadEnd = false
        }
        if (res.data.code === 700) {
          this.items = []
            
        }
      })
    },
    fetchCates () {
      // 请求所有分类
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          // 初始化调用请求商品列表
          this.fetchItems()
        }
      })
     
    }
  },
  components: {
    Mtabbar
  }
}
</script>

<style lang="scss" scoped>
.isHidden {
  visibility: hidden;  
}
.cate-container {
  position: fixed;
  top: 3.5rem;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  .cates-wrap {
    border-right: 0.025rem solid #f8f8f8;
    width: 5.7027rem;
    height: 100%;
    overflow: auto;
    background: #f8f8f8;
    .cate{
      font-size: 20px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      &.active{
        color: #e93b3d;
      }
    }
  }
  .items-wrap {
    flex: 1;
    height: 100%;
    overflow: auto;
  }
}
.items{
   display:flex;
   flex-wrap: wrap; 
  padding:0 8px;
  .item{
    display: flex;
    width: 50%;
    background-color: #fff;
    border-radius: 0.1351rem;
    margin-bottom:10px;
    img{
      width: 3rem;
      height: 3rem;
    }
    .item-info{
       flex:1;
      padding:0 10px;
      h5{
        margin:0;
        color: #333;
        font-size: 16px;
        overflow: hidden;
      text-overflow:ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;// 行数
    -webkit-box-orient: vertical;
        line-height: 40px;
      }
      .item-price{
        color: #ff734c;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
          margin:0;
        }
      }
    }
  }
}
.quehuo{
  width: 100%;
  height: 500px;
}
</style>
